<template>
	<view class="page-wrap">
		<view class="header-wrpa">
			<sundeheng-custom bgColor="#ffffff" color="#333" :isBack="true" class="sundeheng">
				<block slot="content">账户详情</block>
				<block slot="right">
					<view class="header-right-icon">
						<image class="img-full" src="@/static/transaction/service.png" mode=""></image>
					</view>
				</block>
			</sundeheng-custom>
			<view class="trend-tab-wrap">
				<view class="trend-tab-box">
					<view class="trend-tab-item" :class="{'active': trendTabIndex === i}" v-for="(item, i) in trendTab"
						:key="i" @click="switchTrendTab(i)">
						{{item.table}}
					</view>
				</view>
			</view>
		</view>

		<view class="content-wrpa" v-if="trendTabIndex === 0 || trendTabIndex === 1">
			<view class="transfer-form">
				<uni-list>
					<uni-list-item title="银行账户">
						<template v-slot:footer>
							<picker mode="selector" :range="range" :value="account" @change="accountChange">
								<view class="uni-input">{{account}}<uni-icons class="down" type="down" size="20" color="#B0B0B0"></uni-icons></view>
							</picker>
						</template>
					</uni-list-item>
					<uni-list-item title="币种" rightText="人民币" />
					<uni-list-item title="资金密码">
						<template v-slot:footer>
							<uni-easyinput class="form-input" type="password" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="transferForm.fundPassword" placeholder="请输入资金密码" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
						</template>
					</uni-list-item>
					<uni-list-item title="银行密码">
						<template v-slot:footer>
							<uni-easyinput class="form-input" type="password" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="transferForm.bankPassword" placeholder="请输入银行密码" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
						</template>
					</uni-list-item>
					<uni-list-item title="银行可转资金" v-if="trendTabIndex === 0">
						<template v-slot:footer>
							<view class="query-but">
								查询
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="期货可转资金" v-if="trendTabIndex === 1">
						<template v-slot:footer>
							<view class="available-amount">
								0.00
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="transfer-form">
				<uni-list>
					<uni-list-item title="转账金额">
						<template v-slot:footer>
							<uni-easyinput class="form-input" :inputBorder="false" primaryColor="#C2C2C2" trim="all" v-model="transferForm.amount" placeholder="请输入转账金额" placeholderStyle="font-size: 28rpx;" ></uni-easyinput>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="content-wrpa" v-if="trendTabIndex === 2">
			<view class="record-gauge-outfit">
				<view class="record-gauge-outfit-item">
					操作时间
				</view>
				<view class="record-gauge-outfit-item">
					银行账号
				</view>
				<view class="record-gauge-outfit-item">
					发送金额
				</view>
				<view class="record-gauge-outfit-item">
					币种
					<uni-icons class="record-gauge-outfit-icon" type="right" size="16" color="#B0B0B0"></uni-icons>
				</view>
			</view>
		</view>

		<view class="bottom-but" v-if="trendTabIndex === 0 || trendTabIndex === 1">
			<view class="submit-but">
				转账
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trendTabIndex: 0,
				trendTab: [{
					table: '银行转期货',
				}, {
					table: '期货转银行',
				}, {
					table: '当日流水',
				}],
				transferForm: {
					fundPassword: '',
					bankPassword: '',
					amount: '',
				},
				range: [
					'平安银行****4456',
					'平安银行****4455',
					'平安银行****4454',
					'平安银行****4453',
				],
				account: '平安银行****4456',
			};
		},
		methods: {
			// 切换收益统计类型
			switchTrendTab(i) {
				this.trendTabIndex = i
			},
			accountChange(e) {
				let i = e.detail.value
				console.log(i)
				this.account = this.range[i]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}

	.header-wrpa {
		background-color: #fff;
	}

	.header-right-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.trend-tab-wrap {
		padding: 24rpx 0;
		border-top: 1rpx solid #eee;
	}

	.trend-tab-box {
		display: flex;
		justify-content: space-between;
		width: 702rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 4rpx;
		margin: 0 auto;
		box-sizing: border-box;

		.trend-tab-item {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);
			width: 226rpx;
			height: 72rpx;
			border-radius: 16rpx;
			line-height: 72rpx;
			text-align: center;

			&.active {
				background: #FFFFFF;
			}
		}
	}
	.transfer-form {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		& /deep/ .uni-list-item__container {
			align-items: center;
		}
		.uni-input {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: rgba(0,0,0,0.8);
			.down {
				margin-left: 64rpx;
			}
		}
		.form-input {
			text-align: right;
			height: 60rpx;
		}
		.query-but {
			width: 98rpx;
			height: 50rpx;
			background: #EE5953;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 50rpx;
		}
	}
	
	.record-gauge-outfit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx;
		.record-gauge-outfit-item {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.4);
			line-height: 48rpx;
			display: flex;
			align-items: center;
			.record-gauge-outfit-icon {
				margin-left: 10rpx;
			}
		}
	}
	
	.bottom-but {
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		height: 200rpx;
		padding: 32rpx 64rpx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(51,51,51,0.2);
		.submit-but {
			width: 622rpx;
			height: 88rpx;
			background: #EE5953;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>